快速掌握CSS3弹性布局

简介

display:flex;
弹性布局是css3的一种新的布局方式，它能够快速轻易的实现页面的各种布局。

• 采用弹性布局的盒子叫做弹性盒子
• 弹性盒子中的元素称为弹性项目
• 容器中有两条轴，沿水平方向的叫主轴，垂直于主轴的叫侧轴

常用属性

flex-direction:

(控制项目的排列方向)

• row(默认)
• row-reverse
• column(纵向)
• column-reverse

flex-direction: row;

flex-direction: column;

flex-wrap

（如果一行放不下是否换行）

• nowrap(默认)
• wrap(换行)
• wrap-reverse(换行并反转)

    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

        div {
            border: 1px solid red;
        }
        .container {
            width: 500px;
            height: 300px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
        .container div {
            width: 200px;
            height: 100px;
        }

整个容器的宽高为500px*300px，每一个弹性项目的宽高为200px*100px，默认情况是不换行自动将弹性盒子的宽度设置为100px

如果设置为wrap,盒子会进行换行，大小是自己设置的大小

以上两种属性可以通过flex-flow: row wrap;简写

justify- content

弹性项目在主轴上的对齐方式

• flex-start(默认)
• flex-end
• center(居中)
• space-between(两端对齐)
• space-around
• space-evenly

justify-content: flex-end;依次在容器中添加div观察排列方式



justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;
间隙的宽度是一样的

align-items

弹性项目在侧轴上的对齐方式（与在主轴上对齐方式相似）

• stretch(默认)
• flex-start
• flex-end
• center

align-content

元素换行后设置多行对齐方式（此功能与justify- content相似），前提是容器必须设置flex-wrap换行

• flex-start(默认)
• flex-end
• center
• space-between
• space-around
• space-evenly

align-content: flex-start;(1和3的间隙没有了)

align-content: center;

flex

该属性是卸载弹性项目中的，定义项目的伸缩比例

    <div class="container">
        <div class="1">1</div>
        <div class="2">2</div>
        <div class="3">3</div>
    </div>

        .container {
            width: 500px;
            height: 300px;
            display: flex;
        }
        .container div {
            width: 200px;
            height: 100px;
        }

        .first {
            flex: 1;
        }
        .second {
            flex: 2;
        }
        .third {
            flex: 3;
        }

相当于在这一行中分了1+2+3=6份，flex的值就是占了几份

order

该值也是该弹性项目设置的，定义项目的排列顺序

        .first {
            flex: 1;
            order: 3;
        }
        .second {
            flex: 2;
            order: 1;
        }
        .third {
            flex: 3;
            order: 2;
        }

值越大的,就后产生这个盒子